<template>
    <van-nav-bar title="重置密码"  left-arrow @click-left="onClickLeft" />
    <div class="head">
        <label clearable class="resetphone">1.验证手机号码
        </label>
        <van-icon name="arrow" class="arrowicon" />
        <label clearable class="resetpwd">2.验证手机号码
        </label>
    </div>
    <van-form>
        <div class="login">
            <van-cell-group inset>
                <van-icon name="phone-o" class="phoneicon" color="rgb(180, 180, 180)" />
                <van-field v-model="phone" name="手机号" placeholder="请输入手机号码" :rules="[{ required: true, message: '' }]"
                    class="phone" />
                <van-icon name="comment-o" class="captchaicon" color="rgb(180, 180, 180)" />
                <van-field v-model="captcha" name="短信验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '' }]" class="captcha" />
                <label class="getcaptcha" @click="getCaptchaChoice">{{ captchaButtonText }}</label>
                <div class="captcha_prompt" v-if="showCaptchaPrompt">
                    <p class="phone_success" @click="handlePhoneSuccess"> {{ phone_success }}</p>
                    <p class="phone_notnull" @click="handlePhoneNotnull">{{ phone_notnull }}</p>
                    <p class="phone_isfalse" @click="handlePhoneIsfalse">{{ phone_isfalse }}</p>
                    <p class="phone_isoccupied" @click="handlePhoneIsoccupied">{{ phone_isoccupied }}</p>
                </div>
            </van-cell-group>
        </div>
        <div style="margin:20px;position: relative;">
            <van-button round block type="primary" native-type="submit" style="border-radius: 10px;" @click="toNext">
                下一步
            </van-button>
            <div class="successmsg" v-if="showSuccess">
                <van-icon name="checked" class="checkedicon" />
                {{ successmsg }}
            </div>
            <div class="alertmsg" v-if="showAlert">
                {{ alertmsg }}
            </div>
        </div>
    </van-form>
</template>
<script setup>
import { ref} from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
const router = useRouter();
let phone = ref('');
let captcha = ref('');
let showCaptchaPrompt = ref(false);
let showSuccess = ref(false);
let showAlert = ref(false);
let captchaButtonText = ref('获取验证码');
let phone_success = ref('验证码发送成功');
let phone_notnull = ref('手机号码不能为空');
let phone_isfalse = ref('手机号码格式不正确');
let phone_isoccupied = ref('该手机号码已被占用');
let successmsg = ref('');
let alertmsg = ref('');
let countdownInterval;
let phonenum = ref('')


function handlePhoneSuccess() {
    showSuccess.value = true;
    successmsg.value = phone_success.value;
    showCaptchaPrompt.value = false;
    setTimeout(() => {
        showSuccess.value = false;
    }, 3000)
    if (!countdownInterval) {
        let timeLeft = 120;
        captchaButtonText.value = `${timeLeft}s`;
        countdownInterval = setInterval(() => {
            timeLeft--;
            captchaButtonText.value = `${timeLeft}s`;
            if (timeLeft <= 0) {
                clearInterval(countdownInterval);
                countdownInterval = null;
                captchaButtonText.value = '获取验证码';
            }
        }, 1000);
    }

    const data = {
        phone: phone.value
    }
    http.post('/patient/msg/', data).then(res => {
        if (res.data.code == 200) {
            console.log("请求成功", res.data.msg_code);
            phonenum.value = res.data.msg_code
            alert(res.data.msg_code)
        } else {
            alert(res.data.msg)
        }
    }).catch(err => {
        console.log("请求失败", err);
    })
    showCaptchaPrompt.value = true;
}


function toNext() {
    if(captcha.value == ''){
        alert("验证码不能为空")
    }else if(captcha.value != phonenum.value){
        alert("验证码错误")
    }else if(captcha.value == phonenum.value){
        router.push({
            path: "/findpwd",
            query: {
                phone: phone.value,
            }
        })
    }
}

function getCaptchaChoice() {
    showCaptchaPrompt.value = true;
}
function handlePhoneNotnull() {
    showAlert.value = true;
    alertmsg.value = phone_notnull.value;
    showCaptchaPrompt.value = false;
    setTimeout(() => {
        showAlert.value = false;
    }, 3000)
}

function handlePhoneIsfalse() {
    showAlert.value = true;
    alertmsg = phone_isfalse;
    showCaptchaPrompt.value = false;
    setTimeout(() => {
        showAlert.value = false;
    }, 3000)
}

function handlePhoneIsoccupied() {
    showAlert.value = true;
    alertmsg = phone_isoccupied;
    showCaptchaPrompt.value = false;
    setTimeout(() => {
        showAlert.value = false;
    }, 3000)
}

const onClickLeft = () => history.back();
</script>
<style scoped>
.head {
    position: relative;
    margin: 20px 20px 20px;
    height: 50px;
    border: 1px solid rgb(209, 204, 204);
}

.resetphone {
    position: absolute;
    top: 30%;
    left: 10%;
}
.arrowicon {
    position: absolute;
    font-size: 67px;
    color: rgb(247, 242, 242);
    top: -7px;
    right: 40%;
}
.resetpwd {
    position: absolute;
    color: #1989fa;
    top: 30%;
    right: 10%;
}

.login {
    position: relative;
    border: 1px solid rgb(230, 230, 230);
    margin: 0 20px;
}

.phoneicon {
    position: absolute;
    top: 15px;
    left: 30px;
}

.captchaicon {
    position: absolute;
    top: 60px;
    left: 30px;
}

.phone,
.captcha {
    margin-left: 40px;
}

.getcaptcha {
    position: absolute;
    color: #1989fa;
    font-size: 14px;
    right: 10%;
    top: 55px;
}

.captcha_prompt {
    position: absolute;
    height: 150px;
    background-color: rgb(246, 248, 250);
    right: -6%;
    top: 80px;
    border: 1px solid rgb(161, 160, 160);
    border-radius: 3px;
    z-index: 2;
}

.captcha_prompt p {
    background-color: rgba(230, 233, 235, 0.826);
    border: 1px solid rgb(161, 160, 160);
    border-radius: 3px;
    margin: 10px;
    text-align: center;
}

.checkedicon {
    position: absolute;
    left: 42%;
    top: 10%;
    font-size: 25px;
}

.successmsg {
    position: absolute;
    left: 28%;
    bottom: -100px;
    width: 150px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgb(36, 35, 35);
    color: #f5efef;
    border-radius: 10px;
}

.alertmsg {
    position: absolute;
    left: 28%;
    bottom: -60px;
    width: 150px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: rgb(36, 35, 35);
    color: #f5efef;
    border-radius: 10px;
}
</style>